On-page content structure

 

On this page:

Web Design User Interface Website illustration.

Easy-to-read headlines and content

Users tend to scan web pages to get the information they need. And many do so from their mobile devices. Make your headlines clear and short, and break up text into easy-to-read chunks. This helps them find what they need fast. On this page, you’ll learn:

  • How to write proper headlines and sub-headlines
  • Tips to create scannable content
  • The benefits of a component-based design system

Headlines and sub-headlines 

 

CT.gov uses sentence case for headlines and sub-headlines. This follows AP style and makes your content easier to read and scan quickly. Follow these guidelines when writing headlines for your CT.gov site.

  • Use sentence case - CT.gov uses sentence case for all headlines, sub-headlines, and links. This means capitalizing the first word and proper nouns, like you would in a sentence. This is the default setting for our design system.
    • Special cases: Your agency may have unique items that you refer to as proper nouns (i.e. a benefit program, a published report, an agency division, etc.), which currently use title case. You can continue using title case for those items, but the rest of the headline should be in sentence case. Example:
      • Correct: How to request a form from Public Records
      • Incorrect: How to Request a Form from Public Records
  • Be specific - Top headlines should briefly identify what’s on your web page.
  • Consider length - Your top headline should not exceed more than three lines (visually) on a mobile device.
  • Add sub-headlines - Sub-headlines should be no more than 30 words and/or 70 characters.
  • Include keywords - Top headline should include your top keyword with a summary of on-page content. It reassures readers and search engines that they’ve landed in the right place.

Make it easy for people to scan your content 

 

Customers should be able to scan your content and understand the main objective without having to read through a wall of text. This will save them time searching for answers. Your copy should be easy to understand and navigate on a mobile device. Follow these guidelines to ensure your content is scannable.

  • Use plain language - Write content at a sixth grade reading level. Avoid complicated phrases and government jargon. Remember to test your copy for readability. This ensures your content is accessible to a broader audience. Learn more about plain language.
  • Use lists - When possible, use bulleted or numbered lists to summarize key points. This makes it easy for someone to quickly understand a topic, without having to read a whole wall of text.
  • Use small content chunks and limit word count - Create small, easy-to-read content chunks and avoid lengthy sections of text. For sentences, keep it to 15-20 words. For paragraphs, aim for three to five sentences.
  • Optimize headlines - Since headlines and sub-heads are prominent, readers will naturally gravitate to them.
  • Add images - Pictures speak a thousand words! Use images to reinforce key messages and direct people’s gaze.
  • Write for mobile devices - Since mobile devices are becoming the dominant platform for web traffic, content should reflect that!
View a webpage that uses plain language, bulleted lists, and images, to ensure readers can easily scan the content  
Desktop, tablet and mobile devices

Component-based design

Most CT.gov sites use the same content management system: Sitecore. Sitecore leverages components, instead of designers creating a custom design for every page. This component-based design helps to reduce errors and ensure consistency across all the CT.gov websites.

In fact, the section you're reading right now is using a component called "Lead Story". It features a large image attached to a section of copy. The “Helpful Tips” section below uses a component called the “Accordion drop-down.

Want to learn more about all the components you can use on your own agency web pages?

Visit the Sitecore component guide now  

Helpful tips

  • The “Bite” is your headline. Make your headline short, relevant, and powerful.
  • The “Snack” is a short summary paragraph at the top of your piece.
  • The “Meal” is your actual written piece. Remember the principles laid out on this page, and your reader will walk away well-fed.
  • To see how the strategy works, check out this great way to use the “Bite-Snack-Meal” approach with your content.

Mobile users make up the majority of online consumers. Typically, a mobile user will only look at the first two screen-fulls of content before deciding to read on or click away. Take a look at how a mobile-first approach can make a significant difference in fulfilling your users' needs.

Call-to-action that requires a user to take an action. “Download Now” buttons, click-to-call icons, links, and forms are all examples of CTA’s. CTA’s should be visually highlighted, and content will likely be structured around these goals.

H1s serve as the overarching title of your content. These are also called headers and heading tags, and they are essential for UX and SEO. 

Make sure your H1 accurately describes your content and includes a top keyword if possible. Bonus points if your headline directly addresses popular queries bringing users to your content. For example, if “how to renew a license” is driving traffic to your site, it’s a good idea to shape your top headline around this search so users know they’re in the right place.

Words or phrases users input to search engines.

Lower in the hierarchy than top headlines, sub-headlines are the succeeding titles for the subsections of your content. 

If your top headline is an H1 in HTML, your sub-headlines will be H2’s, H3’s, etc.

Search engine results page.

A style of webpage / print design that draws a reader’s eye downward and across the page using visual cues. See more “Z pattern” examples here!

Related pages

Using images 

Learn about the importance of using images in your content.

Writing for mobile devices 

Making sure your content is optimized for mobile devices.